<template>
    <div class="loginContent">
        <div class="topArea">
            <div class="logo">
                <img src="@/assets/img/logo.png" alt="">
            </div>
        </div>

        <div class="login_box">
            <h4>账号及密码登录</h4>
            <div class="login_input">
                <span class="icon ">
                    <span class="usericon">
                        <img src="/assets/img/user.png" alt="">
                        <span></span>
                    </span>
                </span>
                <el-input class="" v-model="userid" placeholder="请输入账号"></el-input>
            </div>
            <div class="login_input">
                <span class="icon ">
                    <span class="paswicon">
                        <img src="/assets/img/lock.png" alt="">
                    </span>
                </span>
                <el-input type="password" class="" v-model="pasw" placeholder="请输入密码"></el-input>
            </div>

            <div class="check_lalel">
                <el-checkbox v-model="remeberme">记住我</el-checkbox>
                <span class="forgot">忘记登录密码？</span>
            </div>
            <el-button class="login_btn" type="primary" @click="login();">登录</el-button>

            <div class="tip" >
                {{tip}}
            </div>



        </div>

    </div>

</template>

<style lang="sass" scoped>
.loginContent
    background: url('../../assets/img/loginbg.jpg') no-repeat 0 0
    background-size: 100% 100%
    height: 100vh
    width: 100%
    position: relative
    .opdiv
        position: absolute
        width: 100%
        height: 100%


    .topArea
        height: 80px
         background: rgba(255, 255, 255, 0.3)
        .logo
            padding: 15px 30px
            opacity: 1
            img
                height: 50px

    .login_box
        float: right
        margin-top: 120px
        margin-right: 190px
        width: 280px
        height: 290px
        background: rgba(255, 255, 255, 0.7)
        padding: 30px
        border-radius: 5px
        h4
            color:#2d2d2d
            font-size: 16px
            text-align: center
            margin-top: 0
            margin-bottom: 20px

        .login_input
            margin-bottom: 10px
            display: flex
            opacity: 1
            .icon
                width: 40px
                height: 40px
                background-color: #EF702E
                .usericon
                    width: 23px
                    height: 19px
                    z-index: 2
                img
                    width: 23px
                    height: 19px
                    margin: 9px


                .paswicon
                    width: 23px
                    height: 19px
                    z-index: 2
                    img
                        width: 23px
                        height: 19px
                        margin: 9px



            .el-input
                flex: 1
                .el-input__inner
                    border-radius: 0




        .check_lalel
            font-size: 12px
            color:#2d2d2d
            .forgot
                float: right


        .login_btn
            margin-top: 20px
            margin-bottom: 15px
            width: 100%
            opacity: 1


        .login_btn:hover
            border-color: #ED6A5F
            opacity: 0.8

        .tip
            font-size: 14px
            color: #ED6A5F





.el-input__inner
	border: #EF702E 1px solid !important


</style>


<script>
import md5 from "js-md5";
import axios from "axios";
import { CONFIG } from "@/config/env";

let API = CONFIG.PROJECT.API;
import Vue from "vue";
import { mapActions } from "vuex";

export default {
  name: "login",

  data() {
    return {
      userid: "",
      pasw: "",
      remeberme: true,
      loginUrl: `${API.URL}/bg_login`,
      tip: "",
      userName: ""
    };
  },
  mounted() {
    this.hideNavBar();

    console.log(this.$root);
    this.$emit("hideNav");
    // let token = this.getCookie('login_token');
    // console.log(token)
    // let path = this.$router.path;
    // console.log(path)
    // if(token){
    // let username=this.getCookie('username')
    // sessionStorage.setItem('login_token', token);
    // sessionStorage.setItem('username',username)
    // let redirect = decodeURIComponent(this.$route.query.redirect || '/');
    // this.$router.push({
    //     path: redirect
    // })
    // }
  },
  methods: {
    login: function() {
      console.log("登录");
      this.tip = "";
      let _this = this;
      let psw = this.pasw;
      let pswmdt = md5(psw);

      let datas = { username: this.userid, password: pswmdt };
      axios({
        method: "post",
        url: this.loginUrl,
        params: datas
      }).then(res => {
        console.log(res);
        let data = res.data;
        if (data.result == "ok") {
          _this.$message("登录成功");
          let expireDays = 1000 * 60 * 60 * 24 * 2;
          _this.setCookie("username", _this.username, expireDays);
          _this.setCookie("login_token", data.token, expireDays);
          sessionStorage.setItem("login_token", data.token);
          sessionStorage.setItem("username", _this.username);
          let redirect = decodeURIComponent(this.$route.query.redirect || "/");
          this.$router.push({
            path: redirect
          });
        } else {
          _this.tip = data.message;
        }
      });
    }
  }
};
</script>
